<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #dv{
            width: 300px;
            height: 300px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div id="dv"></div>
    <script>
        (function (window) {
         // 获取最小值和最大值之间的随机数
            function getRandom(min, max) {
                return Math.floor(Math.random() * (max - min) + min);
            }
            // 获取div
            var map = document.getElementById('dv');
            // 创建构造函数，实例化new的时候，需要传入需要的对象和属性
            function Star(width,height,src,map) {
                this.width  = width; //如果传入有实值就是传入的值 没有就用 20；
                this.height = height;
                this.src = src; //实例化的时候需要传入小星星地址
                this.x = 0; // 位置在render方法中生成不需要传入，所以为0即可
                this.y = 0;
                this.area = map; // 实例化的时候需要传入将小星星添加到哪里的div也就是地图区域
                this.img = document.createElement('img'); // 创建img元素，用于变成小星星
            }
            // 渲染位置
            Star.prototype.render = function () {
                // 生成小星星移动的x水平和y垂直轴的位置
                // 获取随机数的位置：最小值为0 最大值为 地图的x宽或高y
                // this.area是地图  offsetWidth是宽度 offsetHeight 是高度
                var x = getRandom(0,this.area.offsetWidth);
                var y = getRandom(0,this.area.offsetHeight);
                // 赋值给构造函数的x 和 y
                this.x = x;
                this.y = y;
                // 将值赋值给img元素，也就是给小星星
                this.img.style.left = this.x + 'px';
                this.img.style.top = this.y + 'px';
            }
            // 渲染图片属性，并加入地图区域，并调用渲染位置
            Star.prototype.init = function () {
                // 添加绝对定位，因为需要left和top来移动，记得给地图加上相对定位
                this.img.style.position = "absolute";
                // 将实例化时候传入的小星星图片地址赋值给img元素
                this.img.src = this.src;
                // 将实例化传入宽度和高度的值传入给小星星
                this.img.style.width = this.width + 'px';
                this.img.style.height = this.height + 'px';
                // 将img元素插入到地图
                this.area.appendChild(this.img);
                // 调用小星星位置渲染方法，改变小星星的位置
                this.render();
            }
            // 传入实值：宽度 高度 图片地址 插入到的地图区域
            var star = new Star(28,28,'images/star.png',map);
            // 实例化对象后还是没有用的，只是传入了需要的值，需要调用对应方法才会真正的去处理
            //调用：对象.方法();
            star.init();
            // 给div元素添加点击事件，也就是地图区域
            map.onclick = function () {
                // 点击的时候，小星星的位置重新发生变化，所以调用render小星星位置渲染方法
                star.render();
            }
        })(window)

    </script>
</body>
</html>